<script lang="ts" setup>
import { onBeforeMount, ref } from 'vue';
import type { SelectMixedOption } from 'naive-ui/es/select/src/interface';
import { isSuccess } from '@/utils/response';
import * as service from './api';

const roleOptions = ref<SelectMixedOption[]>([]);

onBeforeMount(async () => {
  const response = await service.page({ pageIndex: 0, pageSize: 10 });
  if (isSuccess(response)) {
    const roles = response.data;
    const options: SelectMixedOption[] = [];
    roles.data.forEach(role => {
      options.push({ label: role.name, value: role.id });
    });
    roleOptions.value = options;
  }
});
</script>

<template>
  <n-select :options="roleOptions" />
</template>
